/** 透明主题 */
html.other {
  // css 配色方案会影响整个html的文字颜色
  color-scheme: dark;
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #3375b9;
  --el-color-primary-light-5: #4496e9;
  --el-color-primary-light-7: #2d7ccad7;
  --el-color-primary-light-8: #2877c7d3;
  --el-color-primary-light-9: #4389cfcb;
  --el-color-primary-dark-2: #66b1ff;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #4e8e2f;
  --el-color-success-light-5: #3e6b27;
  --el-color-success-light-7: #2d481f;
  --el-color-success-light-8: #25371c;
  --el-color-success-light-9: #1c2518;
  --el-color-success-dark-2: #85ce61;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #a77730;
  --el-color-warning-light-5: #7d5b28;
  --el-color-warning-light-7: #533f20;
  --el-color-warning-light-8: #3e301c;
  --el-color-warning-light-9: #292218;
  --el-color-warning-dark-2: #ebb563;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #b25252;
  --el-color-danger-light-5: #854040;
  --el-color-danger-light-7: #582e2e;
  --el-color-danger-light-8: #412626;
  --el-color-danger-light-9: #2b1d1d;
  --el-color-danger-dark-2: #f78989;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;
  --el-color-info: #909399;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #2d2d2f;
  --el-color-info-light-9: #202121;
  --el-color-info-dark-2: #a6a9ad;
  --el-box-shadow:
    0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark:
    0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
    0px 8px 16px -8px #000000;
  --el-border-color-darker: #636466;
  --el-border-color-dark: #58585b;
  // form表单元素外框颜色
  --el-border-color: #195fec5e;
  --el-border-color-extra-light: #195fec85;
  // el-card tree组件外框颜色
  --el-border-color-light: #5397e0;
  // 表格线条颜色
  --el-border-color-lighter: #5397e0;
  --el-fill-color-darker: #424243;
  --el-fill-color-dark: #39393a;
  // 表单鼠标经过颜色,高亮颜色
  --el-fill-color-light: #195fec5e;
  --el-fill-color-lighter: #195fec85;
  --el-fill-color-extra-light: #195fec85;
  // 表格选中高亮颜色,默认--el-color-primary-light-9
  --el-table-current-row-bg-color: #195fec85;
  /** 下面是关键部分 */
  // 最底层页面背景色（tagview背景）
  --el-bg-color-page: #ffffff00;
  // table card 蒙版 背景颜色
  --el-bg-color: #111d2cf3;
  // 背景颜色覆盖
  --el-bg-color-overlay: transparent;
  // 弹窗标题颜色
  --el-fill-color: #142b54;
  // 组件背景颜色
  --el-fill-color-blank: transparent;
  // 弹窗颜色
  // --el-popup-modal-bg-color: transparent;
  // 蒙版颜色
  --el-mask-color: rgba(255, 255, 255, 0.5);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  // 主题颜色， 按钮
  --el-text-color-primary: #fff;
  // 组件文本颜色，例如table、tree
  --el-text-color-regular: #fff;
  // 组件标题文本颜色，例如table、tree
  --el-text-color-secondary: #fff;
  // 提示颜色
  --el-text-color-placeholder: #8d9095;
  // disable文字颜色
  --el-text-color-disabled: #6c6e72;
  // 菜单鼠标经过背景颜色
  --el-menu-hover-bg-color: var(--el-fill-color-light);
  --menu-background: var(--el-fill-color-blank);
  --menu-top-background: transparent;
  --menu-active-text: var(--el-menu-active-color);
  --menu-text: #fff;
  --menu-hover: rgb(255 255 255 / 20%);
  --sidebar-logo-background: var(--el-bg-color-overlay);
  // 自定义， 鼠标经过菜单颜色
  --hover-bg: var(--el-fill-color-light);
  // 弹窗背景颜色
  --el-dialog-bg-color: #113860;
  // 导航栏高度
  --navbar-height: 94px;
  .el-popper,
  .el-overlay,
  .el-dialog {
    // 弹窗背景颜色
    --el-bg-color: #113860;
    // 弹窗内容不透明
    --el-bg-color-overlay: #142b54;
  }
}

html.other .el-button {
  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

html.other .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

html.other .el-empty {
  --el-empty-fill-color-0: var(--el-color-black);
  --el-empty-fill-color-1: #4b4b52;
  --el-empty-fill-color-2: #36383d;
  --el-empty-fill-color-3: #1e1e20;
  --el-empty-fill-color-4: #262629;
  --el-empty-fill-color-5: #202124;
  --el-empty-fill-color-6: #212224;
  --el-empty-fill-color-7: #1b1c1f;
  --el-empty-fill-color-8: #1c1d1f;
  --el-empty-fill-color-9: #18181a;
}

html.other .el-tag.el-tag--primary {
  // tag标签文字颜色
  --el-tag-text-color: #fff;
  --el-tag-bg-color: transparent;
}

html.other .md-editor {
  --md-color: #fdfdfe;
  --md-bk-color: transparent;
  div.default-theme {
    --md-theme-code-block-bg-color: #0c1b2c;
  }
}
